<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax接口列表页数据展示</title>
</head>
<body>
<div id="myDiv"></div>
<ul>
    <li id = "uid"></li>
</ul>

<script>
    //标准接口模式
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //代表请求成功了
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

            let res = xmlhttp.responseText;
            res = JSON.parse(res);
            console.log(res);
            for (let i = 0 ;i<res.length;i++){
                document.querySelector("#uid").innerHTML += "<li><a href='post.html?id="+res[i].artical_id+"'>"+res[i].title+"</a><p>"+res[i].datetime+"</p>"+"</li>";
            }
        }
    }

    xmlhttp.open("GET","http://192.168.84.130/Api_demo/Api/artical.php",true);
    xmlhttp.send();
</script>
</body>
</html>

